@import "../../scss/var";
@import "../../scss/mixin";

page {
  background-color: $them;
}

.cash-page > .header{
  position: relative;
  .text{
    position: relative;
    display: block;
    width: 750px;
    height: 60px;
    background-color: rgba(0,0,0,.2);
    font-size: 24px;
    color: #ffffff;
    text-align: center;
    line-height: 60px;
    z-index: 1;
  }
  .img{
    position: relative;
    margin-top: -36px;
    width: 750px;
    height: 576px;
    z-index: 0;
  }

  .desc, .condition{
    text-align: center;
    line-height: 1;
    color: #ffffff;
  }

  .desc{
    position: absolute;
    top: 215px;
    width: 100%;
    font-size: 48px;
    font-weight: bold;
    .yellow{
      color: #fff000;
    }
  }

  .condition{
    position: absolute;
    top: 290px;
    width: 100%;
    font-size: 24px;
  }
}

.cash-list-container{
  @include container;
  padding: 24px;
  background-color: #fff;
  margin-top: -260px;
  min-height: calc(100vh - 96px - 160px - 240px);

  .header{
    text-align: right;
    .more{
      font-size: 24px;
      color: #999999;
      .img{
        display: inline-block;
        margin-right: 7px;
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }
      .text{
        line-height: 1;
        vertical-align: middle;
      }
    }
    .title-container{
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 15px 0 30px;
      .line{
        width: 100px;
        height: 2px;
        background-color: #ebebeb;
      }
      .title{
        margin: 0 15px;
        font-size: 36px;
        font-weight: bold;
        color: #1a1a1a;
      }
    }
    .sum-coin{
      margin-bottom: 15px;
      font-size: 28px;
      color: #e92c13;
      text-align: center;
    }
  }

  .footer-container{
    height: 160px;
    .footer{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 686px;
      height: 160px;
      background: #fff;
      .text{
        margin: 18px 0;
        text-align: center;
        color: $black-title;
        font-size: 24px;
        line-height: 1;
      }
      .btn-container{
        text-align: center;
      }
      .btn{
        display: inline-block;
        width: 240px;
        height: 64px;
        background-blend-mode: normal,
        normal;
        border-radius: 32px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        line-height: 64px;
        &:not(:last-child) {
          margin-right: 24px;
        }
        &.friend{
          color: #fff;
          background-image: linear-gradient(90deg,
            #fe460a 0%,
            #fe5d24 50%,
            #fd743e 100%),
          linear-gradient(
              #ff5050,
              #ff5050);
        }
        &.cash{
          color: #666;
          background-image: linear-gradient(90deg,
            #d1d1d1 0%,
            #ebebeb 100%),
          linear-gradient(
              #ff5050,
              #ff5050);
          background-blend-mode: normal,
          normal;
        }
      }
    }
  }
}
